import 'package:flutter/material.dart';

//Row与Column都是单行单列的，Wrap则突破了这个限制，mainAxis上空间不足时，则向crossAxis上去扩展显示。
//从效率上讲，Flow肯定会比Wrap高，但是Wrap使用起来会方便一些。
class WrapWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text("Wrap"),
          leading: new BackButton(),
        ),
        body: new Wrap(
          //主轴（mainAxis）的方向，默认为水平。
          direction: Axis.horizontal,
          //主轴方向上的对齐方式，默认为start。
          alignment: WrapAlignment.start,
          //主轴方向上的间距。
          spacing: 8,
          //run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行。
          runAlignment: WrapAlignment.start,
          //run的间距。
          runSpacing: 4,
          //交叉轴（crossAxis）方向上的对齐方式。
          crossAxisAlignment: WrapCrossAlignment.start,
          //定义了children摆放顺序，默认是down.
          verticalDirection: VerticalDirection.down,
          children: <Widget>[
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue.shade900,
                child: Text(
                  'AH',
                  style: TextStyle(fontSize: 10.0),
                ),
              ),
              label: Text('Viwenzhang'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue.shade900,
                child: Text(
                  'SXB',
                  style: TextStyle(fontSize: 10.0),
                ),
              ),
              label: Text('Jack'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue.shade900,
                child: Text(
                  'EDG',
                  style: TextStyle(fontSize: 10.0),
                ),
              ),
              label: Text('ClearLove7'),
            ),
            Chip(
              avatar: CircleAvatar(
                backgroundColor: Colors.blue.shade900,
                child: Text(
                  'IG',
                  style: TextStyle(fontSize: 10.0),
                ),
              ),
              label: Text('JackLove'),
            ),
          ],
        ));
  }
}
